<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport"
	content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>管理后台</title>
<link rel="stylesheet"
	href="/v1/xtj-wechat/static/js/layui-v2.5.6/layui/css/layui.css" media="all">
<style>
body {
	margin: 10px;
}

.demo-carousel {
	height: 200px;
	line-height: 200px;
	text-align: center;
}
.layui-table-page{
text-align: center
} 
</style>
</head>
<body>
<!-- 工具集 -->
<div class="my-btn-box">
    <span class="fl">
 
        <a class="layui-btn btn-add btn-default" id="btn-add">添加活动</a>
      
    </span>
   
</div>

<div style="text-align: center;">
任务列表
<table class="layui-hide" id="demo" lay-filter="test"></table>
</div>
	

	<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="detail">查看兑换券</a>
  <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="files">查看文件列表</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除活动</a>
</script>


	<div id="openProductBox" style="display: none; padding: 10px; text-align: center;">

		<table id="openProductTable" lay-filter="openProductTable"></table>
	</div>

	<script type="text/javascript"
		src="/v1/xtj-wechat/static/js/layui-v2.5.6/layui/layui.js"></script>
		<script type="text/javascript"
		src="/v1/xtj-wechat/static/js/jquery.min.js"></script>
	<!-- <script type='text/javascript'
		src='http://cdn.staticfile.org/jquery/2.1.1/jquery.min.js'></script> -->
	<script>

layui.config({
  version: '1593348928663' //为了更新 js 缓存，可忽略
});
 
layui.use(['laydate', 'laypage', 'layer', 'table', 'carousel', 'upload', 'element', 'slider'], function(){
  var laydate = layui.laydate //日期
  ,laypage = layui.laypage //分页
  ,layer = layui.layer //弹层
  ,table = layui.table //表格
  ,carousel = layui.carousel //轮播
  ,upload = layui.upload //上传
  ,element = layui.element //元素操作
  ,slider = layui.slider //滑块
  
  
  
  
  //执行一个 table 实例
  table.render({
    elem: '#demo'
    ,url: '/v1/xtj-wechat/xtjActivity/getActivityList' //数据接口
    ,title: '用户表'
    //,toolbar: 'default' //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
    ,totalRow: true //开启合计行
  ,cols: [
  	[
    {field:'id', width:180, title: 'ID', sort: true}
    ,{field:'name', width:600, title: '活动名称', sort: true}
    ,{fixed: 'right',title: '操作', width: 300, align:'center', toolbar: '#barDemo'}
    , {field: 'upload', fixed: 'right', width: 300, title: '导出/导入', align: 'center'
    , templet: function(d){//这里的参数d是templete的固定用法，可以取到该行的所有数据
            	//class里的upload_btn是用来标志上传按钮的，没有定义实际的css样式
                return '<button class="layui-btn layui-btn-warm layui-btn-xs upload_btn" value="'+d.id+'">导入兑换券</button>'+
              ' <button class="layui-btn layui-btn layui-btn-xs derive_btn" lay-event="xiazai"  value="'+d.id+'">导出兑换券</button>'+
              ' <button class="layui-btn layui-btn layui-btn-xs derive_btn uploadFile_btn"   value="'+d.id+'">上传资源文件</button>';
        }
    }

    
  ]
  	]
  ,page: true //开启分页
  , done: function(res, curr, count){//表格加载完成后，对上传按钮进行渲染
      var tableId = this.id;
      var tableElem = this.elem;
      //table render出来实际显示的table组件
      var tableViewElem = tableElem.next();
      //渲染当前页面的所有upload组件
      upload.render({
          elem: tableViewElem.find('.upload_btn')
          ,url: '/v1/xtj-wechat/xtjCoin/toTaskXls'
          ,accept: 'file'
          ,before: function(obj){ //obj包含信息，跟choose回调完全一致。在传值之前先获取id
              var tableElem = this.item;
              uploadParam = tableElem.attr('value');
              layer.load(); //上传loading
          }
          ,data: {
              aid: function () {//data中写值的时候，要用动态获取的方式，即写个function的方式，不然直接写获取不到相应的值。
                  return uploadParam;
              }
          }
          ,done: function (res) {
              layer.closeAll('loading'); //关闭loading
              layer.msg('上传成功');
          }
          ,error: function(index, upload){
              layer.closeAll('loading'); //关闭loading
              layer.msg('上传失败，请重试');
          }
      });
      
      upload.render({
          elem: tableViewElem.find('.uploadFile_btn')
          ,url: '/v1/xtj-wechat/xtjFiles/upload'
          ,accept: 'file'
          ,before: function(obj){ //obj包含信息，跟choose回调完全一致。在传值之前先获取id
              var tableElem = this.item;
              uploadParam = tableElem.attr('value');
              layer.load(); //上传loading
          }
          ,data: {
              aid: function () {//data中写值的时候，要用动态获取的方式，即写个function的方式，不然直接写获取不到相应的值。
                  return uploadParam;
              }
          }
          ,done: function (res) {
              layer.closeAll('loading'); //关闭loading
              layer.msg('上传成功');
          }
          ,error: function(index, upload){
              layer.closeAll('loading'); //关闭loading
              layer.msg('上传失败，请重试');
          }
      });
  }

  
  });
  
  //监听头工具栏事件
  table.on('toolbar(test)', function(obj){
    var checkStatus = table.checkStatus(obj.config.id)
    ,data = checkStatus.data; //获取选中的数据
    switch(obj.event){
      case 'add':
        layer.msg('添加');
      break;
      case 'update':
        if(data.length === 0){
          layer.msg('请选择一行');
        } else if(data.length > 1){
          layer.msg('只能同时编辑一个');
        } else {
          layer.alert('编辑 [id]：'+ checkStatus.data[0].id);
        }
      break;
      case 'delete':
        if(data.length === 0){
          layer.msg('请选择一行');
        } else {
          layer.msg('删除');
        }
      break;
    };
  });
  
  //监听行工具事件
  table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
    var data = obj.data //获得当前行数据
    ,layEvent = obj.event; //获得 lay-event 对应的值
    if(layEvent === 'detail'){
      
      layui.use(['table', 'form'], function() {
  		table2 = layui.table;
  		var form = layui.form;
  		layer.open({
  			type: 1,
  			shade: 0,
  			title: '兑换券列表',
  			area: ['800px', '600px'], //宽高
  			content: $('#openProductBox'),
  			end: function() {
  				vm.query.productName = '';
  			},
  			success: function() {
  				table2.render({
  					elem: '#openProductTable',
  					id: 'openProductTable',
  					height: 480,
  					method: 'get', //接口http请求类型，默认：get
  					url: '/v1/xtj-wechat/xtjCoin/getCoinList', //?page=1&limit=10（该参数可通过 request 自定义）
  					where: {
  						aid: data.id,
  					}, //接口的其它参数
  					request: {
  						pageName: 'page', //页码的参数名称，默认：page
  						limitName: 'limit', //每页数据量的参数名，默认：limit
  					},
  					response: {
  						statusName: 'code', //规定数据状态的字段名称，默认：code
  						statusCode: 200, //规定成功的状态码，默认：0
  						msgName: 'msg', //规定状态信息的字段名称，默认：msg
  						countName: 'count', //规定数据总数的字段名称，默认：count
  						dataName: 'data', //规定数据列表的字段名称，默认：data
  					},
  					page: true, //是否分页
  					limit: 10, //每页显示的条数
  					limits: [10, 20, 30], //每页条数的选择项，默认：[10,20,30,40,50,60,70,80,90]。
  					cols: [
  						[ {
  							field: 'startTime', //字段名
  							title: '开始日期', //标题
  							width: 165,
  							sort: true //是否允许排序 默认：false
  							//fixed: 'left' //固定列
  						}, {
  							field: 'endTime', //字段名
  							title: '结束日期', //标题
  							width: 165,
  							templet: '#lastNumber',
  							sort: true //是否允许排序 默认：false
  							//fixed: 'left' //固定列
  						}, {
  							field: 'coin', //字段名
  							title: '兑换券', //标题
  							width: 175,
  							sort: true //是否允许排序 默认：false
  							//fixed: 'left' //固定列
  						}, {
  							field: 'status', //字段名
  							title: '使用状态', //标题
  							width: 100,
  							/* templet: function(d) {
  								if (d.fkCompanyId == null) {
  									return '<span class="layui-badge" style="cursor: pointer;" onclick="activeState(\'' + d.productId +
  										'\')">未激活</span>'
  								} else {
  									return '<span class="layui-badge layui-bg-green" style="cursor: pointer;">已激活</span>'
  								}
  							}, */
  							sort: true //是否允许排序 默认：false
  							//fixed: 'left' //固定列
  						}, {
  							field: 'updatedAt', //字段名
  							title: '使用时间', //标题
  							width: 165,
  							sort: true //是否允许排序 默认：false
  							//fixed: 'left' //固定列
  						}]
  					]
  				});
  			}
  		});
  	});

      
    } else if(layEvent === 'del'){
      layer.confirm('确定关闭活动吗？', function(index){
    	  obj.del(); //删除对应行（tr）的DOM结构
          layer.close(index);
        //向服务端发送删除指令
          $.ajax({
				url : '/v1/xtj-wechat/xtjActivity/ActivityDelete',
				type : "get",
				data : {id:data.id},
				success : function(obj) {
					if (obj.code == '200') {
						layer.msg('关闭成功!', {
							icon : 1
						});
					} 
				},
				
			});
      });
    } else if(layEvent === 'files'){
        
        layui.use(['table', 'form'], function() {
    		table3 = layui.table;
    		var form = layui.form;
    		layer.open({
    			type: 1,
    			shade: 0,
    			title: '资源文件列表',
    			area: ['800px', '600px'], //宽高
    			content: $('#openProductBox'),
    			end: function() {
    				vm.query.productName = '';
    			},
    			success: function() {
    				table3.render({
    					elem: '#openProductTable',
    					id: 'openProductTable',
    					height: 480,
    					method: 'get', //接口http请求类型，默认：get
    					url: '/v1/xtj-wechat/xtjFiles/getFileList', //?page=1&limit=10（该参数可通过 request 自定义）
    					where: {
    						aid: data.id,
    					}, //接口的其它参数
    					request: {
    						pageName: 'page', //页码的参数名称，默认：page
    						limitName: 'limit', //每页数据量的参数名，默认：limit
    					},
    					response: {
    						statusName: 'code', //规定数据状态的字段名称，默认：code
    						statusCode: 200, //规定成功的状态码，默认：0
    						msgName: 'msg', //规定状态信息的字段名称，默认：msg
    						countName: 'count', //规定数据总数的字段名称，默认：count
    						dataName: 'data', //规定数据列表的字段名称，默认：data
    					},
    					page: true, //是否分页
    					limit: 10, //每页显示的条数
    					limits: [10, 20, 30], //每页条数的选择项，默认：[10,20,30,40,50,60,70,80,90]。
    					cols: [
    						[ {
    							field: 'name', //字段名
    							title: '资源文件名称', //标题
    							width: 400,
    							sort: true //是否允许排序 默认：false
    							//fixed: 'left' //固定列
    						}, {
    							field: 'status', //字段名
    							title: '使用状态', //标题
    							width: 200,
    							 templet: function(d) {
    								if (d.status == 0) {
    									return '<span class="layui-badge" style="cursor: pointer;" onclick="activeState(\'' + d.productId +
    										'\')">资源在线</span>'
    								} else {
    									return '<span class="layui-badge layui-bg-green" style="cursor: pointer;">资源已下线</span>'
    								}
    							}, 
    							sort: true //是否允许排序 默认：false
    							//fixed: 'left' //固定列
    						}
    						 , {field: 'upload', fixed: 'right', width: 200, title: '操作', align: 'center'
    							    , templet: function(d){//这里的参数d是templete的固定用法，可以取到该行的所有数据
    							            	//class里的upload_btn是用来标志上传按钮的，没有定义实际的css样式
    							                return '<button class="layui-btn layui-btn-warm layui-btn-xs upload_btn" lay-event="shangxian" value="'+d.id+'">上线</button><button class="layui-btn layui-btn layui-btn-xs derive_btn" lay-event="xiaxian"  value="'+d.id+'">下线</button>';
    							        }
    							    }
    						 ]
    					]
    				});
    			}
    		});
    	});

        
      } else if(layEvent === 'toExcel'){
    	 upload.render({
    		    elem: '.layui-btn-xs'
    		    ,url: '/v1/xtj-wechat/xtjCoin/toTaskXls' //改成您自己的上传接口
    		    ,accept: 'file' //普通文件
    		    ,done: function(res){
    		      layer.msg('上传成功');
    		      console.log(res);
    		    }
    		  });
    } else if(layEvent === 'xiazai'){//onclick="derive('+d.id+');"
        var url = "/v1/xtj-wechat/xtjCoin/export?aid="+data.id;
        var xhr = new XMLHttpRequest();
        xhr.open('post', url, true);    // 也可以使用POST方式，根据接口
        xhr.responseType = "blob";
        xhr.onload = function () {
            if (this.status === 200) {
                var content = this.response;
                var aTag = document.createElement('a');
                var blob = new Blob([content]);
                var headerName = xhr.getResponseHeader("Content-disposition");
                var fileName = decodeURIComponent(headerName).substring(20);
                aTag.download = fileName;
                aTag.href = URL.createObjectURL(blob);
                aTag.click();
                URL.revokeObjectURL(blob);
            }
        };
        xhr.send()
    }
  
  });
  table.on('tool(openProductTable)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
	    var data = obj.data //获得当前行数据
	    ,layEvent = obj.event; //获得 lay-event 对应的值
	    if(layEvent === 'xiaxian'){
	        layer.confirm('确定下线资源吗？', function(index){
	          //向服务端发送删除指令
	            $.ajax({
	  				url : '/v1/xtj-wechat/xtjFiles/FilesDelete',
	  				type : "get",
	  				data : {id:data.id,status:1},
	  				success : function(obj) {
	  					if (obj.code == '200') {
	  						layer.msg('下线成功!', {
	  							icon : 1
	  						});
	  						table.reload('openProductTable',{  });
	  					} 
	  				},
	  				
	  			});
	        });
	      }else if(layEvent === 'shangxian'){
		        layer.confirm('确定上线资源吗？', function(index){
			          //向服务端发送删除指令
			            $.ajax({
			  				url : '/v1/xtj-wechat/xtjFiles/FilesDelete',
			  				type : "get",
			  				data : {id:data.id,status:0},
			  				success : function(obj) {
			  					if (obj.code == '200') {
			  						layer.msg('上线成功!', {
			  							icon : 1
			  						});
			  						table.reload('openProductTable',{  });
			  					} 
			  				},
			  				
			  			});
			        });
			      }
  });
  
//添加采集设备
  $('#btn-add').on('click', function () {
      layer.open({
          type: 2,
          title: '新增活动',
          maxmin: true,
          area: ['420px', '330px'],
          shadeClose: false, //点击遮罩关闭
          content: '/v1/xtj-wechat/add',
      });
  });


});


</script>

	
</body>
</html>
